<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-15
  Time: 下午8:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        body{
            background: white;
            color: #000;
        }
        .tableInfo{
            padding: 40px;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .tableInfo .tableContent{
            height: 94%;
            width: 100%;
        }

        .tableInfo .limit{
            height: 6%;
            width: 100%;
        }

        .alert{
            height: 400px;
            width: 400px;
            position: absolute;
            left: 38%;
            top: 27%;
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            display: none;
        }

        .alert .msg{
            height: 350px;
            text-align: center;
            align-content: center;
            width: 100%;
            background: #F0F0F0;
            border-radius: 10px 10px 0 0;
            line-height: 350px;
        }

        .alert .b{
            height: 50px;
            width: 100%;
            border-radius: 0 0 10px 10px;
            background: #2aabd2;
            display: flex;
        }

        .alert .b a{
            display: block;
            float: left;
            flex: 1;
            text-align: center;
            align-content: center;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
            padding: 0;
            color: white;
        }

        .alert .b a:first-child{
            border-right: 1px rgba(0,0,0,0.3) solid;
        }

        .alert .b a:hover{
            background: #5bc0de;
        }

        a{
            text-decoration: none;
            margin-left: 20px;
        }


        .limit{
            margin: 0 auto;
            text-align: center;
            align-content: center;
            height: 10%;
        }

        table{
            width: 100%;
        }
        tr{
            width: 100%;
            display: block;
            height: 30px;
            display: flex;
            text-align: center;
            align-content: center;
            line-height: 30px;
            font-size: 10px;
        }
        .info:hover{
            background: #F0F0F0;
        }
        tr:last-child{
            border-bottom: #F0F0F0 1px solid;
        }
        tr:first-child{
            font-weight: 700;
        }
        tr:nth-child(2n){

        }
        tr:nth-child(2n-1){

        }
        td{
            display: block;
            float: left;
            border-right: 1px #F0F0F0 solid;
            border-top: 1px #F0F0F0 solid;
        }
        td:nth-child(1){
            width: 60px;
        }
        td:nth-child(2){
            flex: 1;
        }
        td:nth-child(3){
            flex: 1;
        }
        td:nth-child(4){
            flex: 1;
        }
        td:nth-child(5){
            flex: 1;
        }
        td:nth-child(6){
            flex: 1;
        }
        td:first-child{
            border-left:1px #F0F0F0 solid;
        }
    </style>
</head>

<script type="text/javascript">
    /**
     *
     * @param url:跳转地址
     * @param type:类型，next为上一页，previous为下一页
     * @param page：当前页码
     * @param allPage：所有页数
     */
    function change(url,type,page,allPage) {
        //控制上一页下一页不出现越界的情况
        var previous=document.getElementById("previous")
        var next=document.getElementById("next");
        if (type=='previous' && page-1>=1){
            previous.href=url+"?"+"page="+(page-1);
        }else if (type=='next' && page+1<=allPage){
            next.href=url+"?"+"page="+(page+1);
        }
    }
</script>
<body>
<div class="tableInfo">
    <div class="tableContent">
        <table cellpadding="0" cellspacing="0">

            <tr class="info">
                <td width="10" align="center"><input type="checkbox"/></td>
                <td width="100">名称</td>
                <td width="50">时间</td>
                <td width="50">类型</td>
                <td width="50">操作</td>
            </tr>

            <c:forEach items="${shoppingCat}" var="sh">
                <tr class="info">
                    <td align="center"><input type="checkbox"/></td>
                    <td align="center">${sh.objectname}</td>
                    <td align="center"><f:formatDate value="${sh.adddate}" type="both" dateStyle="long"/></td>
                    <td align="center">${sh.type}</td>
                    <td align="left">
                        <a href="/futer/itemDetail?name=${sh.objectname}">详情</a>
                        <a href="#" onclick="remove('${sh.objectname}')">移除 </a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>


    <div class="limit">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous" id="previous" onclick="change('/futer/shoppingCat','previous',${currentPage},${allPage})">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach items="${page}" var="p">
                    <c:if test="${p==currentPage}">
                        <li><a href="/futer/shoppingCat?page=${p}" id="currentPageNum">${p}</a></li>
                    </c:if>

                    <c:if test="${p!=currentPage}">
                        <li><a href="/futer/shoppingCat?page=${p}">${p}</a></li>
                    </c:if>
                </c:forEach>
                <li>
                    <a href="#" aria-label="Next" id="next" onclick="change('/futer/shoppingCat','next',${currentPage},${allPage})">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <%--显示提示区域--%>
    <div class="alert" id="alert">
        <div class="msg" id="msg">
            是否确定删除？
        </div>
        <div class="b">
            <a href="#" id="yes" >是</a>
            <a href="#" id="no" >否</a>
        </div>
        <span id="optionType" hidden="hidden">购买</span>
    </div>


    <script type="text/javascript">

        //修改当前页码按钮颜色
        var currentPageNum=document.getElementById("currentPageNum");
        currentPageNum.style.background='#B2B2B3';

        var al=document.getElementById("alert");
        var yes=document.getElementById("yes");
        var no=document.getElementById("no");
        function remove(name) {
            al.style.display='block';
            yes.onclick=function (ev) {
                al.style.display='none';

                var info = {
                    'objectname': name,
                    'username':'libowu',
                };
                $.ajax({
                    type: "post",
                    url: "/futer/removeShoppingCat",
                    data:JSON.stringify(info) ,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response, ifo) {

                        if (response=='请求被拒绝，无权限访问'){
                            parent.sengToLogin();
                            return;
                        }

                        if (response==1){
                            window.location.href="/futer/shoppingCat?page=${currentPage}";
                        }else {
                            alert("删除失败");
                        }
                    }, error: function (err) {
                        alert("删除失败！");
                    }
                })
            }
            no.onclick=function (ev) {
                al.style.display='none';
            }
        }
    </script>
</div>
</body>
</html>
